<template>
  <div class="detail-wrap" ref="wrapper">
    <div class="content">
      <!-- 滚动内容区域 -->
      <detail-swiper :picDatas="detailData.pics"></detail-swiper>

      <template v-if="!errShow">
          <!-- 食物详情 -->
      <detail-food 
      v-if="field === 'food'"
      :name="detailData.name"
      :address="detailData.address"
      :openDateTime="detailData.open_datetime"
      :price="detailData.default_price"
      :recomText="detailData.recom"
      :score="detailData.score"
      :starNum="detailData.starNum"
      :keyData="detailData.comment_keyword"
      ></detail-food>

      <!-- 景点详情 -->
      <detail-view
      v-if="field === 'view'"
      :name="detailData.name"
      :address="detailData.address"
      :openDateTime="detailData.open_datetime"
      :price="detailData.default_price"
      :score="detailData.score"
      :starNum="detailData.star"
      :tip="detailData.tip"
      :intro="detailData.intro"
      :ticketInfo="detailData.ticket_info"
      ></detail-view>

      <!-- 酒店详情 -->
      <detail-hotel
      v-if="field === 'hotel'"
      :name="detailData.name"
      :score="detailData.score"
      :starNum="detailData.star"
      :address="detailData.address"
      :price="detailData.default_price"
      :service="detailData.service"
      ></detail-hotel>

      <!-- 按摩详情 -->
      <detail-massage
      v-if="field === 'massage'"
      :name="detailData.name"
      :score="detailData.score"
      :starNum="detailData.star"
      :address="detailData.address"
      :price="detailData.default_price"
      :openDateTime="detailData.open_datetime"
      :keyData="detailData.comment_keyword"
      :service="detailData.service"
      ></detail-massage>

      <!-- ktv详情 -->
      <detail-ktv
      v-if="field === 'ktv'"
      :name="detailData.name"
      :score="detailData.score"
      :starNum="detailData.star"
      :address="detailData.address"
      :price="detailData.default_price"
      :service="detailData.service"
      >
      </detail-ktv>
      </template>
      
      <!-- 错误提示组件 -->
      <error-mes v-if="errShow"></error-mes>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import { DetailModel } from '@/models/detail.js'
import tools from '@/utils/tools.js'
import DetailSwiper from './Sub/Swiper.vue'
import DetailFood from './Detail/Food.vue'
import DetailView from './Detail/View.vue'
import DetailHotel from './Detail/Hotel.vue'
import DetailMassage from './Detail/Massage.vue'
import DetailKtv from './Detail/Ktv.vue'
import ErrorMes from './Sub/ErrorMes.vue'

export default {
  name: 'DetailScrollWrapper',
  components: {
    DetailSwiper,
    DetailFood,
    DetailView,
    DetailHotel,
    DetailMassage,
    DetailKtv,
    ErrorMes
  },
  data () {
    return {
      field: '',
      id: 0,
      // 页面数据
      detailData: {},
      errShow: false,
    }
  },
  // http://localhost:8080/#/detail?field=view&id=7
  mounted () {
    // 异步数据还未回来 造成高度问题
    this.scroll = new BetterScroll(this.$refs.wrapper, {
      scrollY: true,
    });
    let { field, id } = this.$route.query;
    this.field = field;
    this.id = id;
    console.log('detail mounted');

    this.getDetailDatas(this.field, this.id);
  },
  updated () {
    // 重新加载插件
    this.scroll.refresh();
  },
  // 进行组件缓存
  activated () {
    const query = this.$route.query;

    this.currentField = query.field;
    this.currentId = query.id;
    // 判断
    if(this.currentField !== this.field || this.currentId !== this.id) {
      this.field = this.currentField;
      this.id = this.currentId;

      this.getDetailDatas(this.field, this.id);
    }
  },
  methods: {
    async getDetailDatas (field, id) {
      const detailModel = new DetailModel();
      const res = await detailModel.getDetail(field, id);

      if(res && res.status === 0) {
        // 数据成功
        const data = res.data

        this.errShow = false

        // 处理数据
        // "["https://img.meituan.net/msmerchant/17cbf76514d7e4f80e9aad7b6f4fdab41273723.jpg","https://img.meituan.net/msmerchant
        // /2f22b1eda878899d2ca55ae0d14fd1791251304.jpg","https://img.meituan.net/msmerchant/9773911292a4c47a436917d43e078eb31334500.jpg","https://img.meituan.net/msmerchant/bd00b285e31d494af980854fc3c07e951217708.jpg"]"
        data.pics && (data.pics = tools.jsonToArr(data.pics));

        //"味道赞418,分量足142,环境优雅125,上菜快85,回头客55,点心好41,
        // 交通便利12,主食赞4,牛肉赞3,饮品赞3"
        data.comment_keyword && (data.comment_keyword = tools.strToArr(data.comment_keyword));

        //"香辣汤雪花肥牛面,乾隆溏心蛋,番茄汤猪软骨捞面,草本汤猪软骨面,蟹黄油笋衣捞面,酸菜雪花牛肉,老卤凤爪,猪软骨,卤味鸡爪,酸辣半筋半肉面,大师素油拌面,酸汤雪花肥牛面,超级猪蹄,古法烧饼,香草番茄猪软骨,卤蛋,阿拉斯加蟹脚,焦糖布丁,草本汤笋衣面,红酒雪花肋条面,老卤猪手面,软酸汤酸菜猪肚面
        // ,慢烤番茄雪花肋条面,紫米糕,藤椒鸡排,米浆,焦香拌面,手撕牛肉,有筋有肉牛肉面"
        data.recom && (data.recom = tools.replaceToSpace(data.recom))

        data.service && (data.service = tools.jsonToArr(data.service))

        this.detailData = data;
        console.log(this.detailData);
      } else {  
        // 数据失败
        this.errShow = true;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-wrap {
  height: calc(100% - .5rem);
  overflow: hidden;
}
</style>